/* *
@Author: MaLiang
@Date: 2021-08-25
@LastEditors: --
@LastEditTime: --
@path: src/components/common/PageFooter/index.tsx
@Description: qmp子应用公共底部导航栏
* */
import { defineComponent, ref, reactive, watch, onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
interface TabBarItemResult {
  icon: string
  text: string
  path: string
  replace: boolean
}
export default defineComponent({
  name: 'PageFooter',
  setup() {
    const $route = useRoute()
    const { proxy }: any = getCurrentInstance()
    // 默认进入首页
    const active = ref<string>('/')
    const tabbarKey = ref<number>(1)

    // 初始化底部导航数据
    const tabbarList = reactive<TabBarItemResult[]>([
      {
        icon: 'shouye2-line',
        text: '首页',
        path: '/',
        replace: true
      },
      {
        icon: 'sousuo-line',
        text: '搜索',
        path: '/search',
        replace: true
      },
      {
        icon: 'shezhi-line',
        text: '设置',
        path: '/setting',
        replace: true
      }
    ])

    // 监听路由变化
    watch(
      () => $route.path,
      (to) => {
        if ($route.meta.showFootBar) {
          active.value = to
        }
      }
    )

    onMounted(async () => {
      // 若是ios系统，需要通过改变tabbar绑定的key来重新渲染组件（适配ios底部安全区）
      const system: string = await proxy.$judgeSys()
      if (system === 'ios') {
        setTimeout(() => {
          tabbarKey.value += 1
        }, 300)
      }
    })

    const renderFooter = () => {
      return (
        <qmp-tabbar v-model={active.value} key={tabbarKey.value} fixed={true} placeholder={true}>
          {tabbarList.map((item, index) => {
            return (
              <qmp-tabbar-item key={index} name={item.path} icon={item.icon} to={item.path} replace={item.replace}>
                {item.text}
              </qmp-tabbar-item>
            )
          })}
        </qmp-tabbar>
      )
    }
    return () => {
      return $route.meta.showFootBar && renderFooter()
    }
  }
})
